iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
0

到目前為止,Spacebar 的部分介紹了 {{> 模板名稱}}{{helper名稱 參數}},今天要再介紹幾個不同的用法。

If/Unless

#if 模板標籤可以根據條件顯示標籤中的內容:

{{#if 條件}}
  <p>It's false</p>
{{/if}}

也可以加上 else 模板標籤:

{{#if 條件}}
  <p>It's true</p>
{{else}}
  <p>It's false</p>
{{/if}}

#unless 模板標籤則是和 #if 反過來:

{{#unless 條件}}
  <p>It's false</p>
{{else}}
  <p>It's true</p>
{{/if}}

例如我們在網頁上加入一個按鈕,點擊這個按鈕可以切換文字,作法如下:

<!-- my-app/client/hello.html -->
<template name="hello">
	{{#if condition}}
		<p>Condition is true</p>
	{{else}}
		<p>Condition is false</p>
	{{/if}}
	<button id="buttonToggleCondition">切換</button>
</template>
// my-app/client/hello.js
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

Template.hello.onCreated(function() {
    this.condition = new ReactiveVar(true);
});

Template.hello.helpers({
	condition() {
		return Template.instance().condition.get();
	},
});

Template.hello.events({
	'click #buttonToggleCondition'(event, templateInstance) {
		const condition = templateInstance.condition.get();
        templateInstance.condition.set(!condition);
	},
});

With

#with 模板標籤可以用來顯示 object 型態的資料。更精確的說,#with 改變了標籤中所參考的 object,因此在 #with 標籤中的 helper 可以透過 this 取得 #with 所參考的 object。

例如:

<!-- my-app/client/hello.html -->
<template name="hello">
	{{#with person}}
		<p>Name: {{fullName}}</p> <!-- 可以使用 helper -->
		<p>Age: {{age}}</p>       <!-- 也可以直接使用屬性名稱 -->
	{{/with}}
</template>
// my-app/client/hello.js
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

Template.hello.onCreated(function() {
    this.person = new ReactiveVar({
        firstName: 'Max',
        lastName: 'Hsu',
        age: 18,
    });
});

Template.hello.helpers({
	person() {
		return Template.instance().person.get();
	},
    fullName() {
        return `${this.firstName} ${this.lastName}`; // this 參考到 person object 
    },
});

Each

#each 模板標籤可以用來顯示 array 型態的資料。時常會和 Meteor cursor 搭配使用,達到 reactivity 的目的,這會在之後的章節進一步說明。

例如:

<!-- my-app/client/hello.html -->
<template name="hello">
	{{#each dogs}}
		<p>Name: {{name}}</p>
		<p>Age: {{age}}</p>
	{{/with}}
</template>
// my-app/client/hello.js
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

Template.hello.onCreated(function() {
    this.dogs = new ReactiveVar([{
        name: 'Guai',
        age: 2,
    }, {
        name: 'Willy',
        age:7,
    }]);
});

Template.hello.helpers({
	dogs() {
		return Template.instance().dogs.get();
	},
});

Let

#each 模板標籤則可以用來將比較長的變數重新命名。

例如:

<!-- my-app/client/hello.html -->
<template name="hello">
	{{#let frontend=meteor.frontend.framework}}
		<p>Meteor frontend framework : {{frontend}}</p>
	{{/let}}
</template>
// my-app/client/hello.js
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

Template.hello.onCreated(function() {
    this.meteor = new ReactiveVar({
        frontend: {
            framework: 'Blaze',
        },
    });
});

Template.hello.helpers({
	meteor() {
		return Template.instance().meteor.get();
	},
});

重點整理

Template

  • 宣告模板:<template name="模板名稱">...</template>,寫在 .html 檔案裡。

  • 定義模板的行為:

    • Template.模板名稱.onCreated():定義該模板的物件被建立時要執行的 fuction
    • Template.模板名稱.onRendered():定義該模板物件被插入 DOM 時要執行的 fuction
    • Template.模板名稱.onDestroyed():定義該模板物件被摧毀時要執行的 fuction
    • Template.模板名稱.events():定義該模板的 event handlers
    • Template.模板名稱.helpers():定義該模板的 helpers
  • 該模板物件在 onCreated(), onRendered(), onDestroyed 可以透過 this 取用;在 events() 可以透過 event handler 的第二個參數取用;而在 helpers() 則可以透過 Template.instance() 取用。

  • onRendered() 中,模板物件可以透過 find, findAll, firstNode, lastNode, $ 來操作網頁元素;在 onCreated()onDestroyed 則不行。

Blaze

  • Blaze.render():將模板插入 DOM,返回 View 物件

  • Blaze.remove():將 Blaze.render() 所返回的 View 物件從 DOM 移除

Spacebar

  • 顯示模板:{{> 模板名稱}}

  • 顯示 helper 所返回的值:{{helper 參數}}

  • 搭配 helper 的模板標籤:

    • {{# if helper}} ... {{/if}}
    • {{# if helper}} ... {{else}} ... {{/if}}
    • {{# unless helper}} ... {{unless}}
    • {{# with helper}} ... {{/with}}
    • {{# each helper}} ... {{/each}}
    • {{# let hlper}} ... {{/let}}

上一篇
Day03:Blaze/Spacebar 與模板進階使用+搭配 ReactiveVar
下一篇
Day05:MongoDB 與 Collection(一)瀏覽器端的資料庫
系列文
30天快速上手 Meteor - 使用 Universal JavaScript Framework 開發即時聊天大平台8
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言